<!-- Copyright 2019 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/quick_unlock/pin_keyboard.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">


<link rel="import" href="./oobe_icons.html">
<link rel="import" href="./oobe_types.html">
<link rel="import" href="./behaviors/oobe_dialog_host_behavior.html">
<link rel="import" href="./behaviors/oobe_i18n_behavior.html">
<link rel="import" href="./buttons/oobe_back_button.html">
<link rel="import" href="./buttons/oobe_next_button.html">
<link rel="import" href="./common_styles/common_styles.html">
<link rel="import" href="./common_styles/oobe_dialog_host_styles.html">
<link rel="import" href="./dialogs/oobe_adaptive_dialog.html">

<dom-module id="security-token-pin">
  <template>
    <style include="oobe-dialog-host-styles">
      #pinKeyboardContainer {
        margin-top: 30px;
        position: relative;
      }

      #pinKeyboard {
        --pin-keyboard-pin-input-style: {
          width: 192px;
        };
        --pin-keyboard-input-letter-spacing: 13px;
        --pin-keyboard-number-color: var(--google-grey-900);
        --cr-icon-button-margin-start: 5px;
      }

      #errorContainer {
        color: var(--google-red-600);
        font-size: 12px;
        padding: 4px 0 0;
        text-align: center;
        width: 100%;
      }

      #errorIcon {
        --iron-icon-width: 20px;
        --iron-icon-height: 20px;
        margin-inline-end: 3px;
      }

      /* Allows to hide the element while still consuming the space that it needs. */
      [invisible] {
        visibility: hidden;
      }
    </style>
    <oobe-adaptive-dialog class="gaia-dialog" role="dialog" id="dialog"
        aria-describedby="description"
        aria-label$="[[i18nDynamic(locale, 'securityTokenPinDialogTitle')]]">
      <iron-icon slot="icon" icon="oobe-32:lock"></iron-icon>
      <h1 slot="title">
        [[i18nDynamic(locale, 'securityTokenPinDialogTitle')]]
      </h1>
      <div slot="subtitle" id="subtitle">
        <span id="description" hidden="[[processingCompletion_]]">
          [[i18nDynamic(locale, 'securityTokenPinDialogSubtitle')]]
        </span>
      </div>
      <paper-progress slot="progress" id="progress"
          hidden="[[!processingCompletion_]]"
          indeterminate="[[processingCompletion_]]">
      </paper-progress>
      <div slot="content" class="content-centered">
        <div id="pinKeyboardContainer" hidden="[[processingCompletion_]]">
          <pin-keyboard id="pinKeyboard" enable-letters allow-non-digit
              has-error="[[isErrorLabelVisible_(parameters, userEdited_)]]"
              aria-label="[[getLabel_(parameters, userEdited_)]]"
              on-pin-change="onPinChange_" on-submit="onSubmit_"
              disabled="[[!canEdit_]]">
            <div id="errorContainer" role="alert" problem
                invisible$="[[!isLabelVisible_(parameters, userEdited_)]]">
              <iron-icon id="errorIcon" icon="cr:error-outline"></iron-icon>
              <span id="error">[[getLabel_(parameters, userEdited_)]]</span>
            </div>
          </pin-keyboard>
        </div>
      </div>
      <div slot="back-navigation">
        <oobe-back-button id="back" on-click="onBackClicked_">
        </oobe-back-button>
      </div>
      <div slot="bottom-buttons">
        <oobe-next-button id="submit" on-click="onSubmit_"
            disabled="[[!canSubmit_]]"></oobe-next-button>
      </div>
    </oobe-adaptive-dialog>
  </template>
  <script src="security_token_pin.js"></script>
</dom-module>
